<template>
  <el-container class="my-designer" id="my-designer">
    <design-header class="my-designer-header"></design-header>
    <el-main class="my-designer-content">
      <div class="my-designer-layout">
        <transition name="design-fade">
          <design-tree v-if="selectedTree"></design-tree>
        </transition>
        <transition name="design-fade">
          <design-lib v-if="selectedLib"></design-lib>
        </transition>
        <transition name="design-fade">
          <design-content></design-content>
        </transition>
        <transition name="design-fade">
          <design-config v-if="selectedConfig"></design-config>
        </transition>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { computed, defineComponent, onMounted } from "vue";
import designContent from "./design-content/index.vue";
import designTree from "./design-tree/index.vue";
import designLib from "./design-lib/index.vue";
import designConfig from "./design-config/index.vue";
import DesignHeader from "./design-header/design-header.vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { getPageInfoById } from "../../service/page";

export default defineComponent({
  name: "design",
  components: {
    DesignHeader,
    designTree,
    designLib,
    designConfig, designContent
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const selectedTree = computed(() => store.state.design.selectedTree);
    const selectedLib = computed(() => store.state.design.selectedLib);
    const showContent = computed(() => store.state.design.showContent);
    const selectedConfig = computed(() => store.state.design.selectedConfig);
    const selectedComp = computed(() => store.getters["design/selectedComp"]);
    const getPanelOffsetX = computed(() => store.getters["design/getPanelOffsetX"]);
    const getPanelOffsetY = computed(() => store.getters["design/getPanelOffsetY"]);
    const handleAutoSize = () => {
      store.dispatch("design/autoCanvasScale", {
        offsetX: getPanelOffsetX.value,
        offsetY: getPanelOffsetY.value
      });
    };
    const getPageCompsInfo = () => {
      let page_url = route.params.id;
      if (page_url) {
        store.dispatch("design/loadScreen", page_url);
      } else {
        router.push({ name: "404" });
      }
    };
    const handlePageInfo = () => {
      let page_url = route.params.id;
      if (page_url) {
        let page_id = parseInt(page_url.split("PN")[1], 16);
        getPageInfoById({ page_id }).then(res => {
          if (res.code === 0) {
            document.title = `${res.data.result.name} | 编辑器`;
            store.commit("design/SET_PAGEINFO", res.data.result);
          }
        });
      } else {
        router.push({ name: "404" });
      }
    };
    onMounted(() => {
      handlePageInfo();
      getPageCompsInfo();
      handleAutoSize();
      document.onkeydown = (e) => {
        const ctrl = navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey;
        const sKey = ["s", "S"].includes(e.key);
        const aKey = ["a", "A"].includes(e.key);
        const arrowLeftKey = ["ArrowLeft"].includes(e.key);
        const arrowRightKey = ["ArrowRight"].includes(e.key);
        const arrowUpKey = ["ArrowUp"].includes(e.key);
        if (ctrl) {
          if (sKey) {
            e.preventDefault();
            e.stopPropagation();
            store.commit("");
          } else if (aKey) {
            e.preventDefault();
            e.stopPropagation();
            handleAutoSize();
          } else if (arrowLeftKey) {
            e.preventDefault();
            e.stopPropagation();
            store.commit("design/SET_SelectedTree");
            handleAutoSize();
          } else if (arrowRightKey) {
            e.preventDefault();
            e.stopPropagation();
            store.commit("design/SET_SelectedConfig");
            handleAutoSize();
          } else if (arrowUpKey) {
            e.preventDefault();
            e.stopPropagation();
            store.commit("design/SET_SelectedLib");
            handleAutoSize();
          }
        }
      };
      window.onresize = function () {
        handleAutoSize();
      };
    });
    return {
      selectedTree,
      selectedLib,
      showContent,
      selectedConfig,
      selectedComp,
      getPanelOffsetX,
      getPanelOffsetY,
      handleAutoSize,
      getPageCompsInfo,
      handlePageInfo
    };
  }
});
</script>

<style scoped lang="less">
@import "./../../style/page/design.less";
</style>
